<layout-base title="home">
  <template slot="main">
    <!--
      <layout-base></layout-base> => @see: /example/_layout/global-components.html
      <my-button></my-button> => @see: /example/_layout/global-components.html
    -->

    <link itemprop="contentUrl" href="<?= $hello ?>" />

    <div id="home" class="float-left">home page</div>

    <div id="home1" class="float-left" at="<?= at('test') ?>">
      <?= $hello ?>
    </div>

    <div id="home2" class="float-left">home page</div>

    <my-button>button click</my-button>

    <hr>

    <!-- <view:component src="./_demo/register-components.html">
      <template slot="bottom">
        <div class="test">this is bottom</div>
      </template>

      <div>this is default</div>
    </view:component> -->

    <input id="input1" type="text">
    <label for="input1"></label>

    <br>
    <br>
    <br>

    <div>
      <div class="img-test">
        <img data-src="/styles/2022.jpg" width="328" height="338" alt="">
      </div>

      <div data-src="../styles/christmas.jpeg" class="bg-test"></div>
    </div>
  </template>

  <script type="module" src="/example/index.ts"></script>

  <script view:js="false" data-id="<?= $id ?>">
    var $data = window.$data = window.$data || {};
    $data.id = "<?= $id ?>";
    $data.id1 = Number('<?= $id ?>');
    $data.id1 = +('<?= $id ?>');
    $data.id1 = <?= $id ?>;
  </script>
</layout-base>

<style>
  :global(body) {
    padding-bottom: 100px;
  }

  .img-test {
    float: left;
  }

  .bg-test {
    margin-left: 10px;
    margin-bottom: 10px;
    float: left;
    width: 328px;
    background: url(/styles/christmas.jpeg) center center/cover no-repeat;

    &:before {
      content: "";
      display: block;
      height: 0;
      padding-bottom: 75.15%;
    }
  }
</style>
